<template>
  <div>
    <the-header-top></the-header-top>
    <logo-bar></logo-bar>

    <div class="buy-container">
      <div class="buy-content">
      	<!--选择收货地址-->
      	<div class="buy-address">
      		<!--<v-title>{{ $t('message.chooseAddress') }}</v-title>-->
      		<v-title>{{ chooseAddressText }}</v-title>
      		<div class="buy-address-content">
      			<buy-address :switch-buy-type="switchBuyType" @get-address="getAddress($event)"></buy-address>
      		</div>
      	</div>
      	<!--确认订单信息-->
      	<div class="buy-order">
      	  <!--确认订单信息-->
      		<v-title>{{ $t('message.ConfirmOrder') }}</v-title>
      		<div class="buy-order-content">
      			<v-order-item :order="order" :isSoldOut="isSoldOut" :switch-buy-type="switchBuyType"></v-order-item>
      		</div>
          <div v-if="saveBuyType === 2" class="buy-order-choose-sort">
            <!--首付比例-->
            <div class="detail-product-proportion">
              <div class="detail-product-label">
                {{$tc('message.downPayment', 1)}}:
              </div>
              <div :class="{'event-disable': buyType === 'full'}">
                <v-select :selections="proportionList" :default-value="onceScale" @on-change="onParamChange('scale', $event)"></v-select>
              </div>
            </div>
            <!-- 分期 -->
            <div class="detail-product-proportion">
              <div class="detail-product-label">
                {{$tc('message.amortization', 0)}}:
              </div>
              <div>
                <v-chooser :selections="installmentList" :stages="stages" :no-choose="noChoose" @on-change="onParamChange('installment', $event)"></v-chooser>
              </div>
            </div>
          </div>
      		<div class="buy-order-total">
      			<div class="buy-order-total-container">
      				<v-pay :pay="nowPay" :markdowns="markdown" :switch-buy-type="switchBuyType" @dataSend="promotionCode" @userDiscountState="getUserDiscountState"></v-pay>
      			</div>
      		</div>
      		<div class="buy-order-btn">
      			<button class="btn-submit" :class="{'disabled-btn-submit': isSoldOut}" @click="subIndent">{{$t('message.submitOrders')}}</button>
      		</div>
          <!--没有收货地址提示-->
          <div v-if="errorShow">
            <!--{{ $t('message.selectAddress') }}-->
            <v-dialog>
              <div class="no-check-address">
                <span @click="closeAddressTips"></span>
                <p>{{ errorMsg }}</p>
                <button @click="closeAddressTips">{{ $t('message.confirm') }}</button>
              </div>
            </v-dialog>
          </div>
          <div class="pact-article" v-if="this.buyType !== 'full'">
            <span @click="consentProtocol" :class="{'choose-checkbox': isConsentProtocol}"></span>
            <div>{{ $t('message.iAgree') }} <router-link to="buy/protocol" target="_blank">{{ $t('message.standardClause') }}</router-link></div>
          </div>
          <!--提交订单按钮下面的地址-->
      		<div class="buy-order-user">
      			<div class="buy-order-user-name-phone" v-if="address">
      				{{ address.consignee }}<span>{{ address.mobile }}</span>
      			</div>
      			<div class="buy-order-user-address">
      				{{ chooseAddress }}
      			</div>
      		</div>
      	</div>
      </div>
    </div>
    <!--低于200元不能分期购买弹出框-->
    <v-dialog v-if="showDialogType === 'isLessTwoHundred'">
      <div class="dialog-tip">
        <div class="dialog-title">{{$t('message.noStateBuy')}}</div>
        <div class="dialog-btn-group">
          <button type="button" class="dialog-btn btn-orange btn-center" @click="closeDialog">{{$t('message.yes')}}</button>
        </div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VTitle from '@/components/base/VTitle'
import BuyAddress from '@/components/buy/BuyAddress'
import VOrderItem from '@/components/base/VOrderItem'
import VPay from '@/components/base/VPay'
import VDialog from '@/components/base/VDialog'
import VChooser from '@/components/base/VChooserMore'
import VSelect from '@/components/base/VSelect'

export default {
  name: 'Buy',
  components: {
    TheHeaderTop,
    LogoBar,
    VTitle,
    BuyAddress,
    VOrderItem,
    VPay,
    VDialog,
    VChooser,
    VSelect
  },
  data () {
    return {
      showDialogType: '',
      buyType: this.$route.query.buyType,
      goodsId: this.$route.query.goodsId,
      colorId: this.$route.query.colorId,
      versionId: this.$route.query.versionId,
      stages: this.$route.query.stages || 0,
//      proportion: this.$route.query.proportion || '100%',
      address: {},
      nowPay: 0,
      order: {},
      orderId: '',
      errorShow: false,
      usePromotionCode: '',
      isConsentProtocol: false,
      errorMsg: '', // 提交订单错误信息
      isSoldOut: false,
      switchBuyType: this.$route.query.buyType === 'full' ? 1 : 2,
      onceScale: this.$route.query.proportion || 1,
      noChoose: 4,
      markdown: 0,
      saveBuyType: this.$route.query.buyType === 'full' ? 1 : 2,
      stageNumber: 0,
      chooseMark: 1,
      isUserDiscount: 0
    }
  },
  computed: {
    /*proportion () {
      if (this.buyType === 'full') {
        return 1
      } else if (this.couponStage === 1) {
        return this.proportionList[0].id
      } else {
        return this.$route.query.proportion || ''
      }
    },*/
    // 分期
    installmentList () {
      if (parseInt(this.order.base_price) > 10000) {
        return [
          {
//            label: `不分期`,
            label: `${this.$tc('message.amortization', 1)}`,
            selectionInstallment: 0
          },
          {
            label: `3 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 3
          },
          {
            label: `6 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 6
          },
          {
            label: `9 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 9
          },
          {
            label: `12 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 12
          }
        ]
      } else if (parseInt(this.order.base_price) >= 5000 && parseInt(this.order.base_price) <= 10000) {
        return [
          {
//            label: `不分期`,
            label: `${this.$tc('message.amortization', 1)}`,
            selectionInstallment: 0
          },
          {
            label: `3 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 3
          },
          {
            label: `6 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 6
          },
          {
            label: `9 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 9
          }
        ]
      } else if (parseInt(this.order.base_price) < 5000) {
        return [
          {
//            label: `不分期`,
            label: `${this.$tc('message.amortization', 1)}`,
            selectionInstallment: 0
          },
          {
            label: `3 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 3
          },
          {
            label: `6 ${this.$tc('message.amortization', 3)}`,
            selectionInstallment: 6
          }
        ]
      }
    },
    //  首付比例
    proportionList () {
      if (this.buyType === 'full') {
        return [
          {
            name: '100%',
            id: 1
          }
        ]
      } else {
        if (this.stageNumber === 10) {
          return [
            {
              name: '10%',
              id: 0.1
            },
            {
              name: '20%',
              id: 0.2
            },
            {
              name: '30%',
              id: 0.3
            },
            {
              name: '40%',
              id: 0.4
            },
            {
              name: '50%',
              id: 0.5
            },
            {
              name: '60%',
              id: 0.6
            },
            {
              name: '70%',
              id: 0.7
            },
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 15) {
          return [
            {
              name: '15%',
              id: 0.15
            },
            {
              name: '20%',
              id: 0.2
            },
            {
              name: '30%',
              id: 0.3
            },
            {
              name: '40%',
              id: 0.4
            },
            {
              name: '50%',
              id: 0.5
            },
            {
              name: '60%',
              id: 0.6
            },
            {
              name: '70%',
              id: 0.7
            },
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 20) {
          return [
            {
              name: '20%',
              id: 0.2
            },
            {
              name: '30%',
              id: 0.3
            },
            {
              name: '40%',
              id: 0.4
            },
            {
              name: '50%',
              id: 0.5
            },
            {
              name: '60%',
              id: 0.6
            },
            {
              name: '70%',
              id: 0.7
            },
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 30) {
          return [
            {
              name: '30%',
              id: 0.3
            },
            {
              name: '40%',
              id: 0.4
            },
            {
              name: '50%',
              id: 0.5
            },
            {
              name: '60%',
              id: 0.6
            },
            {
              name: '70%',
              id: 0.7
            },
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 40) {
          return [
            {
              name: '40%',
              id: 0.4
            },
            {
              name: '50%',
              id: 0.5
            },
            {
              name: '60%',
              id: 0.6
            },
            {
              name: '70%',
              id: 0.7
            },
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 50) {
          return [
            {
              name: '50%',
              id: 0.5
            },
            {
              name: '60%',
              id: 0.6
            },
            {
              name: '70%',
              id: 0.7
            },
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 60) {
          return [
            {
              name: '60%',
              id: 0.6
            },
            {
              name: '70%',
              id: 0.7
            },
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 70) {
          return [
            {
              name: '70%',
              id: 0.7
            },
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 80) {
          return [
            {
              name: '80%',
              id: 0.8
            },
            {
              name: '90%',
              id: 0.9
            }
          ]
        } else if (this.stageNumber === 90) {
          return [
            {
              name: '90%',
              id: 0.9
            }
          ]
        }
      }
    },
    chooseAddressText () {
      if (this.buyType === 'full') {
//        return '全额购买地址'
        return this.$t('message.fullBuyAddress')
      } else {
//        return '分期购买地址'
        return this.$t('message.installmentBuyAddress')
      }
    },
    // 查看全额购买和分期购买的商品的参数
    queryData () {
      if (this.buyType === 'full') {
        return {
          goods_id: this.goodsId,
          sxzh_id: this.colorId,
          yjsx_id: this.versionId
        }
      } else {
        return {
          goods_id: this.goodsId,
          sxzh_id: this.colorId,
          yjsx_id: this.versionId,
          type: 'fenqi',
          down_payment_percentage: this.onceScale,
          stages: this.stages
        }
      }
    },
    // 按钮下面的地址文本
    chooseAddress () {
      if (JSON.stringify(this.address) !== '{}') {
        return (this.address.province || '') + ' ' + (this.address.city || '') + ' ' + (this.address.district || '') + ' ' + this.address.address_detail
      } else {
        return ''
      }
    }
  },
  methods: {
    getUserDiscountState (i) {
      this.isUserDiscount = i
      console.log(this.isUserDiscount, 67)
    },
    onParamChange (attr, value) {
      if (attr === 'installment' && value.selectionInstallment === 0) {
        this.buyType = 'full'
        this.nowPay = this.order.base_price // 选择不分期，把商品的总价成给VPay组件
        this.markdown = 0
        this.noChoose = 4
        this.onceScale = 1
        this.usePromotionCode = ''
        if (this.switchBuyType === 2) {
//          this.toast.show = true
          this.$store.commit('toast', { switch: true, showType: 'toast', toastText: this.$t('message.switchFullBuyAddress') })
          this.switchBuyType = 1
        }
      } else if (attr === 'installment' && value.selectionInstallment !== 0) {
        this.stages = value.selectionInstallment
        this.buyType = 'installment'
        if (this.switchBuyType === 1) {
//          this.stageNumber = this.$route.query.proportion * 100
          this.stageNumber = this.order.down_payment_ratio
          this.onceScale = this.$route.query.proportion || this.proportionList[0].id // 由不分期切换为分期，重新设置初始值的首付比例
          this.$store.commit('toast', { switch: true, showType: 'toast', toastText: this.$t('message.switchInstallmentBuyAddress') })
//          this.toast.show = true
          this.switchBuyType = 2
        }
        this.getGoodsPrice()
      }
      if (attr === 'scale') {
        this.onceScale = value.id
        this.getGoodsPrice()
      }
    },
      // 点击分期数或者首付比例时
    getGoodsPrice () {
      this.$ajax.getGoodsStagesPrices({
        goods_id: this.goodsId,
        down_payment_ratio: this.onceScale,
        yjsx_id: this.versionId,
        sxzh_id: this.colorId,
        coupons_id: this.usePromotionCode, // 优惠卷id
        stages: this.stages
      }).then(res => {
        if (res.code === 200) {
          this.nowPay = res.data.down_payment
          for (let i in res.data) {
            if (i in this.order) {
              this.order[i] = res.data[i]
            }
          }
        }
      }).catch(() => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    // 关闭弹出框
    closeDialog () {
      this.showDialogType = ''
    },
    consentProtocol () {
      if (this.isConsentProtocol) {
        this.isConsentProtocol = false
      } else {
        this.isConsentProtocol = true
      }
    },
    closeAddressTips () {
      this.errorShow = false
    },
    // 选择了对应的优惠码
    promotionCode (i) {
      // 选择的是‘不使用优惠券’
      if (i === '1') {
        this.noChoose = 4
        this.markdown = 0
        this.usePromotionCode = ''
        this.stages = this.$route.query.stages || 0
        this.onceScale = this.$route.query.proportion
//        this.onceScale = this.$route.query.proportion || this.proportionList[0].id
        this.getProductInfo(this.queryData)
      } else { // 使用了优惠券
        this.usePromotionCode = i
        this.$ajax.userCouponReturnData({
          goods_id: this.goodsId,
          yjsx_id: this.versionId,
          sxzh_id: this.colorId,
          coupons_id: i
        }).then(res => {
          if (res.code === 200) {
            let highestStage = res.data.stages
            this.stages = highestStage
            if (highestStage === 3) {
              this.noChoose = 1
            } else if (highestStage === 6) {
              this.noChoose = 2
            } else if (highestStage === 9) {
              this.noChoose = 3
            } else if (highestStage === 12) {
              this.noChoose = 4
            }
            this.markdown = res.data.coupon_amount
            this.nowPay = res.data.down_payment
            this.stageNumber = res.data.down_payment_ratio
            this.onceScale = this.proportionList[0].id
            for (let i in res.data) {
              if (i in this.order) {
                this.order[i] = res.data[i]
              }
            }
          }
        }).catch(() => {
          this.$store.commit('alert', {
            switch: true
          })
        })
      }
    },
    // 获取子组件的地址
    getAddress (obj) {
      this.address = obj
    },
    // 获取商品信息
    getProductInfo (obj) {
      this.$ajax.fullBuy(obj).then((res) => {
        if (res.code === 200) {
          this.order = res.data
          this.stageNumber = res.data.down_payment_ratio
          // this.order.down_payments = this.order.down_payment
          this.nowPay = this.buyType === 'full' ? res.data.base_price : res.data.down_payment
          // 判断商品是否下架
          if (res.data.shelves === 1) {
            this.isSoldOut = true
          } else {
            this.isSoldOut = false
          }
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.requestDataFailedOrLimitNo')
          })
        } else if (res.code === 301) {
          // 子组件已经调用接口进行判断了，如果这里在进行跳转，会进行2次跳转，造成redirect错误
//        this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      }).catch(() => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    // 提交订单
    subIndent () {
      //  者商品下架
      if (this.isSoldOut) {
        return
      }
      if (this.buyType !== 'full') {
        if (!this.isConsentProtocol) {
          this.$store.commit('alert', { // 没有选择协议或
            switch: true,
            alertText: this.$t('message.placeCheckProtocol')
          })
          return
        }
      }
      if (this.isUserDiscount === 2) { // 判断是否有优惠券 1为没有 2为有
        if (this.chooseMark === 1 && this.usePromotionCode === '') {
          this.chooseMark = 2
          this.$store.commit('alert', { // 提示没有使用优惠券
            switch: true,
            alertText: this.$t('message.hasCanUserDiscount')
          })
          return
        }
      }
      if (JSON.stringify(this.address) === '{}') {
        this.errorMsg = this.$t('message.noSelectAddress')
        this.errorShow = true
      } else {
        // 获取语言类型
        let t = window.localStorage.getItem('thaiPayMallLanguage')
        if (this.buyType === 'full') {
          this.$ajax.fullPayConfirm({
            goods_id: this.goodsId,
            sxzh_id: this.colorId,
            yjsx_id: this.versionId,
            address_id: this.address.address_id,
//            code: this.usePromotionCode,
            lang: t
          }).then((res) => {
            if (res.code === 200) {
              this.orderId = res.data.id
              this.$router.push({path: '/personal/order/detail', query: {buyType: this.buyType, orderId: this.orderId}})
            } else if (res.code === 202) { // 请求数据失败数据为空
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.requestDataFailed')
              })
            } else if (res.code === 301) {
              this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
            } else if (res.code === 311) {
              // 该收货地址目前无法配送
              this.errorMsg = this.$t('message.nowCanSend') + res.data
              this.errorShow = true
            } else if (res.code === 313) { // 商品下架或不存在
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.commodityNonentity')
              })
            } else if (res.code === 315) {
              this.$store.commit('alert', { // 优惠券的优惠值不能大于商品价格
                switch: true,
                alertText: this.$t('message.priceLimit')
              })
            } else {
              console.log(res.code, res.msg)
            }
          }).catch(() => {
            this.$store.commit('alert', {
              switch: true
            })
          })
        } else if (this.buyType === 'installment') {
          this.$ajax.installmentPayConfirm({
            goods_id: this.goodsId,
            sxzh_id: this.colorId,
            yjsx_id: this.versionId,
            address_id: this.address.address_id,
            stages: this.stages,
//            down_payment_percentage: this.proportion,
            down_payment_percentage: this.onceScale,
            code: this.usePromotionCode,
            lang: t
          }).then((res) => {
            if (res.code === 200) {
              this.orderId = res.data.id
              this.$router.push({path: '/personal/order/detail', query: {buyType: this.buyType, orderId: this.orderId}})
            } else if (res.code === 201) { // 输入有误
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.inputHasError')
              })
            } else if (res.code === 202) { // 信用额度不够
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.lineOfCredit')
              })
            } else if (res.code === 203) { // 优惠码不存在
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.promotionCodeNo')
              })
            } else if (res.code === 204) { // 优惠码不在有效期内
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.promotionCodePastDue')
              })
            } else if (res.code === 205) { // 优惠码已经被使用
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.promotionCodeUse')
              })
            } else if (res.code === 301) {
              this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
            } else if (res.code === 303) {
              // 该收货地址目前无法配送
              this.errorMsg = this.$t('message.nowCanSend') + res.date
              this.errorShow = true
            } else if (res.code === 305) {
//              console.log('商品价格低于200泰铢不能分期')
              this.showDialogType = 'isLessTwoHundred'
            } else if (res.code === 307) { // 该商品已经下架
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.commoditySoldOut')
              })
            } else if (res.code === 308) { // 优惠券的优惠值不能大于商品价格
              this.$store.commit('alert', {
                switch: true,
                alertText: this.$t('message.priceLimit')
              })
            } else {
              console.log(res.code, res.msg)
            }
          }).catch(() => {
            this.$store.commit('alert', {
              switch: true
            })
          })
        }
      }
    }
  },
  created () {
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    this.getProductInfo(this.queryData)
  }
}
</script>

<style scoped>
  .event-disable {
    pointer-events: none;
  }
  .buy-order-choose-sort {
    box-sizing: border-box;
    margin-top: 24px;
    padding: 32px 24px;
    background: #F7F7F7;
    height: 164px;
  }
  .detail-product-proportion {
    font-size: 0;
    height: 38px;
    line-height: 38px;
    margin-bottom: 24px;
  }
  .detail-product-proportion > div {
    display: inline-block;
  }
  .detail-product-label {
    font-size: 14px;
    color: #333;
    margin-right: 24px;
    vertical-align: top;
    height: 38px;
    line-height: 38px;
  }
  .dialog-tip {
    width: 320px;
    height: 131px;
    padding: 60px 70px 40px;
    background-color: #fff;
  }

  .dialog-title {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    text-align: center;
  }

  .dialog-btn-group {
    height: 46px;
    margin-top: 60px;
    font-size: 0;
  }

  .dialog-btn {
    width: 140px;
    height: 46px;
    cursor: pointer;
  }
  .btn-center {
    margin-left: 90px;
  }
.buy-container {
	min-width: 1200px;
  background: #f4f4f4;
}

.buy-content {
  margin: 0 auto;
  width: 1200px;
  padding: 40px 0;
}

.buy-address {
  background: #fff;
  padding: 40px 40px 22px;
}

.buy-address-content {
	margin-top: 24px;
}

.buy-order {
	margin-top: 24px;
	padding: 40px;
	background-color: #fff;
}

.buy-order-content {
	margin-top: 24px;
}

.buy-order-total {
	margin-top: 40px;
	overflow: hidden;
}

.buy-order-total-container {
	float: right;
}

.buy-order-btn {
	margin-top: 24px;
	text-align: right;
}

.btn-submit {
	width: 140px;
	height: 48px;
	border: 0;
	background: #ff600a;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
.disabled-btn-submit {
  background: #FFA371;
}
.disabled-btn-submit:hover {
  background: #FFA371!important;
}

.btn-submit:hover {
	background-color: #ff3c00;
}

.btn-submit:active {
	background-color: #e83700;
}

.buy-order-user {
	line-height: 17px;
	font-size: 12px;
	color: #666;
	text-align: right;
	margin-top: 24px;
}

.buy-order-user-name-phone {
	height: 17px;
}

.buy-order-user-name-phone span {
	padding-left: 20px;
}

.buy-order-user-address {
	height: 17px;
	margin-top: 8px;
}
.pact-article {
  margin-top: 24px;
  text-align: right;
}
.pact-article span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  margin-right: 12px;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #D7D7D7;
  border-radius: 2px;
  cursor: pointer;
  vertical-align: middle;
}
.choose-checkbox {
  background: url("../assets/images/icon_checkbox_select.png") no-repeat 0;
  border: none!important;
}
.pact-article div {
  vertical-align: middle;
  display: inline-block;
  font-size: 12px;
  color: #676767;
}
.pact-article a {
  font-size: 12px;
  color: #FF600A;
}
.pact-article a:hover {
  text-decoration: underline;
}
.no-check-address {
  position: relative;
  box-sizing: border-box;
  width: 460px;
  height: 240px;
  background: white;
  text-align: center;
  padding-top: 60px;
}
.no-check-address span {
  position: absolute;
  top: 17px;
  right: 17px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../assets/images/icon_close.png") no-repeat;
  cursor: pointer;
}
.no-check-address p {
  font-size: 18px;
  color: #333333;
}
.no-check-address button {
  width: 140px;
  height: 46px;
  background: #FF600A;
  border: none;
  font-size: 14px;
  color: #FFFFFF;
  position: relative;
  top: 60px;
  cursor: pointer;
}
.no-check-address button:hover {
  background-color: #ff3c00;
}
</style>
